<!-- html -->
<template>
  <h2 class="h2">computed，计算属性</h2>
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="num2">
  <span class="span2">和：{{ sum }}</span>
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="changeSum">修改sum</button>
  <br>
  <span class="span2">num3：</span>
  <input class="input1" type="number" v-model="num3">
  <span class="span2">num4：</span>
  <input class="input1" type="number" v-model="num4">
  <span class="span2">积：{{ mul }}</span>
  <button class="button1" @click="changeNum3">修改num3</button>
  <button class="button1" @click="changeMul">修改mul</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'computedTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, computed } from 'vue'
//数据
let num1 = ref(1)
let num2 = ref(1)
let num3 = ref(1)
let num4 = ref(1)
//只读，只实现了get方法
let sum = computed(() => num1.value - 0 + num2.value)
//可读可写
let mul = computed({
  get: () => num3.value * num4.value,
  set: (val) => num3.value += val
})
//方法
function changeNum1() {
  num1.value += 1
}
function changeSum() {
  sum.value = 100
}
function changeNum3() {
  num3.value += 1
}
function changeMul() {
  mul.value = 1
}
</script>

<!-- 样式 -->
<style scoped></style>